<template>
  <div class="home-wrap">
    <van-nav-bar title="首页" />

    <!-- <van-nav-bar
    title="标题"
    left-arrow
    @click-left="onClickLeft"
    :border="false"
  />

  <van-nav-bar title="标题2">
    <template #left>
      <span>🏀</span>
    </template>
  </van-nav-bar> -->

    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img
            src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://gips2.baidu.com/it/u=3944689179,983354166&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://gips3.baidu.com/it/u=1874299413,3253595329&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div>

    <van-tabbar v-model="active" active-color="orange" :route="true">
      <van-tabbar-item icon="wap-home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/calssify">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/cart"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    onClickLeft() {
      console.log("我要后退");
    },
  },
};
</script>

<style>
.home-wrap .my-swipe .van-swipe-item {
  height: 200px;
}

.home-wrap img {
  width: 100%;
  height: 100%;
}

.home-wrap .van-swipe__indicator {
  width: 20px;
  height: 6px;
  border-radius: 0;
}
</style>
